<%@page import="java.awt.print.Printable"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>_${customer.customerName}_灯光拣选</title>
<script type='text/javascript' src='http://wms.ttyuncang.com/WebSpeech.js'></script>
<script type="text/javascript">
  $(function() {
		$("#queryForm").validate(); 
		var status='${task.status}';
		if(status=='10'){
		  lightShelf_pick_flag=true;
		  $("#sel_shelfCode").attr("disabled","disabled");
		}
		
		WebSpeech.speak("听到声音了么");
  });
  
  var lightShelf_pick_flag=false;
 
  function ajaxBindLightShelf(){
	  $("#stockInfo").html('');
	  $("#lightShelf_msg").html('');
	  var shelfCode=$("#sel_shelfCode").val();
	  
	  $.ajax({
			type : 'post',
			url : '${ctx}/lampPickTask/ajaxBindLightShelf',
			data : {
				shelfCode:shelfCode,
				taskCode:'${task.taskCode}'
			},
			dataType : 'json',
			success : function(data) {
			    
			    var status=data.status;
			    
			    if(status=='4'){
			       $("#lightShelf_msg").css("color","red");
			       $("#lightShelf_msg").html("使用中，请选择其他灯光架!");
			       WebSpeech.speak("使用中请选择其他灯光架");
			    }else if(status=='3'){
			       $("#lightShelf_msg").css("color","red");
			       $("#lightShelf_msg").html("架位数不能满足此任务,请选择其他灯光架!");
			       WebSpeech.speak("架位数不能满足此任务请选择其他灯光架");
			    }else if(status=='2'){
			       alert(2);
			    }else if(status=='1'){
			       $("#lightShelf_msg").css("color","green");
			       $("#lightShelf_msg").html("绑定灯光架成功,请上架...");
			       WebSpeech.speak("绑定灯光架成功请上架");
			       lightShelf_pick_flag=true;
			       $("#sel_shelfCode").attr("disabled","disabled");
			       
			       var stockList = data.stockList;
				   var str="";
				   $.each(stockList, function(i) {
					    var stock=stockList[i];
					    
					    str +="<tr name='tr_stock' >";
					    str += "<td id='stockCode_"+stock.stockCode+"'>"+stock.stockCode+"</td>";
						str += "<td id='stockName_"+stock.stockCode+"'>" +stock.stockName+ "</td>";
						
						var status=stock.status;
						if(status=='free'){
						  str += "<td name='status' id='"+stock.stockCode+"'>空置中</td>";
						}else if(status=='busy'){
						  str += "<td name='status' id='"+stock.stockCode+"'>使用中</td>";
						}
						
						str += "<td name='orderno' id='orderno_"+stock.stockCode+"'></td>";
						str += "<td id='goodsNum_"+stock.stockCode+"'></td>";
						str += "<td id='goodsInfo_"+stock.stockCode+"'></td>";
						
						str +="</tr>";
						
					});
					
					$("#stockInfo").html(str);
					$("#txt_orderno").focus();
					
					//写入订单数据
					var orderList=data.orderList;
					$.each(orderList,function(i,order){
						 $("[name='status']").each(function(){
				    		 var status=$(this).html();
				    		 if(status=='空置中'){
				               var stockCode=(i+1);
				               $("#orderno_"+stockCode).html(order.order.ordeno); 
				               
				               var goodsNum=0;
				               var goodsInfo='';
				               $.each(order.order.orderItems,function(j,orderItem){
				            	   goodsNum+=orderItem.qty;
				            	   goodsInfo+=orderItem.sku+"_"+orderItem.qty+";"
				               });
				               
				               $("#goodsNum_"+stockCode).html(goodsNum);
				               $("#goodsInfo_"+stockCode).html(goodsInfo);
				               $(this).html("使用");
				               return false;
				    		 }
				    	 });
					 }); 
					 
			       
			    }
				
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
		}); 
		
  }
  
  function keyDown(){
	  $("#message").html("");
  }
  
    //SKU输入框onchange事件
	function onchange_sku(){
    	
	   var sku=$("#txt_sku").val().trim();
	   var taskId='${task.id}';
	   var shelfCode=$("#sel_shelfCode").val();
	   
	   //检查是否选择灯光架
	   if(lightShelf_pick_flag==false){
		   alert("请选择灯光架。");
		   $("#txt_sku").val("");
		   $("#sel_shelfCode").focus();
		   return;
	   }
	   
	   $.ajax({
			type:'post',
			url:'${ctx}/lampPickTask/ajaxSetGoods',
			data:{
				shelfCode:shelfCode,
				taskId:taskId,
				sku:sku
			},
			dataType:'json',
			success:function(data) {
				
				var msg=data.msg;
				
				if(msg=="hasfinished"){
				  	WebSpeech.speak("此任务已经全部完成请按确定继续");
					window.alert("此任务已经全部完成！请按“确定”继续。"); 
					location.href='${ctx}/lampPickTask/v2_queryLampPickTaskList';
				}
				else if(msg=="busy"){
				    $("#lightShelf_msg").css("color","red");
					$("#lightShelf_msg").html("灯光架占用中,请选择其他灯光架!");
					$("#txt_sku").val("");
					$("#sel_shelfCode").focus();
					
					WebSpeech.speak("灯光架占用中请选择其他灯光架");
				}
				else if(msg=="error"){
				   $("#message").css("color","red");
			       $("#message").html("商品SKU异常,请核对...");
				   $("#txt_sku").val("");
				   $("#txt_sku").focus();
				   
				   WebSpeech.speak("商品SKU异常请核对");
				}
				else if(msg=='success'){
				   var stockCode=data.stockCode;
				   var isFinished=data.isFinished;
				   $("#tr_"+stockCode+"_"+sku).remove();
			       
			       if(isFinished=='finished'){
			           $("#message").css("color","green");
			           $("#message").html("请放入第"+stockCode+"号位，商品全部上架！");
				       $("#txt_sku").val("");
					   complete();//完成任务
					   WebSpeech.speak("请放入第"+stockCode+"号位商品全部上架");
			       }else if(isFinished=='notfinished'){
			           $("#message").css("color","green");
			           $("#message").html("请放入第"+stockCode+"号位。");
				       $("#sel_shelfCode").attr("disabled","disabled");
				       $("#txt_sku").val("");
				       WebSpeech.speak("请放入第"+stockCode+"号位");
			       }
				}
				
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
	   });
	}
    
  //完成操作
  function complete(){
	  var taskCode='${task.taskCode}';
	   $.ajax({
			type:'post',
			url:'${ctx}/lampPickTask/ajaxCompleteLampPickTask',
			data:{
				taskCode:taskCode
			},
			dataType:'json',
			success:function(data) {
				var msg=data.msg;
				if(msg=="unfinished"){
				   alert("任务未完成！");
				}else if(msg=="success"){
			        window.alert("此任务已经全部完成！请按“确定”继续。"); 
					location.href='${ctx}/lampPickTask/v2_queryLampPickTaskList';
			    }else{
			      alert("网络繁忙，请稍后重试...");
			    }
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
	  });
  }
  
</script>
</head>

<body>



<section class="content">
<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">条件查询</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">

	<table class="table table-striped table-bordered table-condensed" style="margin-top: 0px;">
		<thead>
			<th style="vertical-align: middle; color: white; " colspan="12" bgcolor="#8EB4CB">任务信息</th>
		</thead>
		<thead><tr>
		        <th>仓库</th>
			    <th>任务编号</th>
			    <th>批次编号</th>
			    <th>运单类型</th>
			    <th>作业类型</th>
			    <th>订单数量（条）</th>
			    <th>任务状态</th>
			</tr>
	   </thead>
	   <tr>
	      <td>${task.warehouseCode}</td>
	      <td>${task.taskCode}</td>
	      <td>${task.batchCode}</td>
	      <td>
	          <c:if test="${task.billType eq 'cbill'}">普通运单</c:if>
			  <c:if test="${task.billType eq 'ebill'}">电子运单</c:if>
	      </td>
	      <td>
		     <c:if test="${task.flowType eq 'prePrint'}">预先打单</c:if>
		     <c:if test="${task.flowType eq 'intimePrint'}">及时打单</c:if>
		  </td>
	      <td>${task.orderQty}</td>
	       <td>
		         <c:if test="${task.status eq '1'}">创建任务</c:if>
			     <c:if test="${task.status eq '2'}">已分配拣货任务</c:if>
			     <c:if test="${task.status eq '3'}">已拣货</c:if>
			     <c:if test="${task.status eq '4'}">已分配灯光拣选任务</c:if>
			     <c:if test="${task.status eq '5'}">已经灯光拣选</c:if>
			     <c:if test="${task.status eq '6'}">已分配包装任务</c:if>
			     <c:if test="${task.status eq '7'}">已包装</c:if>
			     <c:if test="${task.status eq '8'}">已分配发货任务</c:if>
			     <c:if test="${task.status eq '9'}">已发货</c:if>
			     <c:if test="${task.status eq '10'}">任务进行中...</c:if>
		  </td>
	   </tr>
	</table>
	</div></div></div></div>
	
	

<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">条码扫描区</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
				
	<!-- 条码扫描区 -->
	<table class="table table-striped table-bordered table-condensed" style="margin-top: 0px;">
<!-- 		<thead> -->
<!-- 			<th style="vertical-align: middle; color: white; " colspan="6" bgcolor="#8EB4CB">条码扫描区</th> -->
<!-- 		</thead> -->
		<tr>
		    <td style="width: 120px; font-weight: bold; vertical-align: middle;text-align: center;">选择灯光架：</td>
		    <td  colspan="4">
		    
		       <c:if test="${task.status eq '4' }">
				 <select  name="sel_shelfCode"  id="sel_shelfCode" class="input-medium" onchange="ajaxBindLightShelf();" >
					<option value=""></option>
					<c:forEach items="${lightShelfList}" var="lightShelf">
						<option value="${lightShelf.shelfCode}" >${lightShelf.shelfName}</option>
					</c:forEach>
				</select>
				</c:if>
				
				 <c:if test="${task.status eq '10' }">
				 <select  name="sel_shelfCode"  id="sel_shelfCode" class="input-medium" disabled="disabled">
						<option value="${curLightShelf.shelfCode}"  selected="selected" >${curLightShelf.shelfName}</option>
				</select>
				</c:if>
				<span id="lightShelf_msg" style="color: red; margin-left: 10px; font-size: 30px; "></span>
		    </td>
		    <td></td>
		</tr>
	   <tr>
	      <td style="width: 120px;font-weight: bold;vertical-align: middle;text-align: center;">扫描SKU编码：</td>
	      <td style="vertical-align: middle;">
              <input type="text" id="txt_sku" onchange="onchange_sku();" onkeydown="keyDown();"/> 
              <span id="message" style="color: red; margin-left: 10px; font-size: 30px;"></span>
	      </td>
	   </tr>
	   
	</table>
	</div></div></div></div>
	
	

<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">待上架商品</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
				
	<table  class="table table-bordered table-condensed">
<!-- 	    <thead> -->
<!-- 			<th style="vertical-align: middle; color: white; " colspan="5" bgcolor="#8EB4CB">待上架商品</th> -->
<!-- 		</thead> -->
		<thead><tr>
			    <th style="width: 150px;">架位名称</th>
			    <th style="width: 150px;">SKU</th>
			    <th style="width: 150px;">状态</th>
			</tr></thead>
		<tbody id="stockInfo">
		      <c:forEach items="${skuInfoList}" var="s" varStatus="i">
		      <tr id="tr_${s.stock.stockCode}_${s.sku}" >
		          <td>${s.stock.stockName}</td>
		          <td>${s.sku}</td>
		          <td>
		            ${s.upStatus}
		          </td>
		      </tr>
			</c:forEach>
		</tbody>
	</table>
	</div></div></div></div>
	
	

<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">订单信息</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">	
				
				
	<table id="contentTable" class="table table-bordered table-condensed">
<!-- 	    <thead> -->
<!-- 			<th style="vertical-align: middle; color: white; " colspan="11" bgcolor="#8EB4CB">订单信息</th> -->
<!-- 		</thead> -->
		<thead><tr>
			    <th style="width: 150px;">架位编号</th>
			    <th style="width: 150px;">架位名称</th>
			    <th style="width: 150px;">状态</th>
			    <th style="width: 150px;">订单号</th>
			    <th style="width: 150px;">商品数量</th>
			    <th>商品信息</th>
			</tr></thead>
		<tbody id="stockInfo">
		   <c:if test="${task.status eq '10' }">
		      <c:forEach items="${curStockList}" var="s" varStatus="i">
				<tr name='tr_stock' >
				   <td id="stockCode_${s.stockCode}">${s.stockCode}</td>
				   <td id="stockName_${s.stockCode}">${s.stockName}</td>
				   <td id="${s.stockCode}" name="status" >
				     <c:if test="${s.status eq 'free' }">空置中</c:if>
				     <c:if test="${s.status eq 'busy' }"><font color=blue>使用中</font></c:if>
				   </td>
				   <td id="orderno_${s.stockCode}" name="orderno">${s.orderno}</td>
				   <td id="goodsNum_${s.stockCode}" >${s.goodsNum}</td>
				   <td id="goodsInfo_${s.stockCode}" >${s.goodsInfo}</td>
				</tr>
			</c:forEach>
		   </c:if>
		</tbody>
	</table>
	</div></div></div></div>
	
</section>

</body>
</html>
